<script>
	import {
		Canvas,
		Scene,
		PerspectiveCamera,
		Mesh,
		DirectionalLight,
		MeshStandardMaterial,
		PCFSoftShadowMap,
		BoxBufferGeometry,
		SphereBufferGeometry,
		PlaneBufferGeometry,
		MeshPhongMaterial,
		GridHelper,
		Line,
		WebGLRenderer,
		AmbientLight,
		PointLight,
		OrbitControls,
		MathUtils,
		DoubleSide,
		MeshBasicMaterial,
		RepeatWrapping,
		TextureLoader,
		Empty
	} from 'svelthree';

	import { onMount } from 'svelte';
	const light = {};
	onMount(() => {
		let frame;

		const loop = () => {
			frame = requestAnimationFrame(loop);

			light.x = 2 * Math.sin(Date.now() * 0.001);
			light.y = 1 + 2 * Math.sin(Date.now() * 0.0004);
			light.z = 0.5 * Math.cos(Date.now() * 0.002);
		};

		loop();

		return () => cancelAnimationFrame(frame);
	});
	let cubeGeometry = new BoxBufferGeometry(0.8, 0.8, 0.8);
	let cubeGeometry1 = new BoxBufferGeometry(0.3, 0.3, 0.3);
	let qiu = new SphereBufferGeometry(1, 36, 36);
	let dimian = new PlaneBufferGeometry(10, 10);
	let cubeMaterial = new MeshStandardMaterial();
	let dimianMaterial = new MeshPhongMaterial({ color: 0x999999, depthWrite: false });
	var loader = new TextureLoader();

	var texture = loader.load('../img/map.jpg');
	texture.wrapS = texture.wrapT = RepeatWrapping;
	texture.matrixAutoUpdate = false; // 设置纹理属性matrixAutoUpdate为false以后，纹理将通过matrix属性设置的矩阵更新纹理显示
	let cutmaterial = new MeshBasicMaterial({ map: texture });
	let grid = new GridHelper(0.51, 0.88, 0x888888, 0x444444);

	import {
		rotateCube,
		triggerOnOutAni,
		triggerOnOverAni,
		triggerOnClickAni,
		handleOnClick,
		onPointerMove
	} from './animations';
</script>

<Canvas let:sti h={800} w={1000} interactive>
	<Scene {sti} let:scene id="scene1" props={{ fog: { color: '#666', near: 500, far: 2000 } }}>
		<PerspectiveCamera {scene} id="cam1" props={{ position: [10, 10, 3], lookAt: [0, 0, 0] }} />
		<DirectionalLight {scene} castShadow shadowMapSize={8 * 512} pos={[-3, 3, 3]} />
		<AmbientLight {scene} props={{ intensity: 1.25 }} />
		<!-- <GridHelper {scene} props={{ opacity: 0.2, transparent: true }} /> -->
		<DirectionalLight {scene} castShadow shadowMapSize={8 * 512} pos={[-3, 3, 3]} />

		<Mesh
			{scene}
			let:parent
			geometry={qiu}
			material={cubeMaterial.clone()}
			mat={{ roughness: 0.5, metalness: 0.5, color: '#f62fff' }}
			pos={[light.x, light.y, light.z]}
			scale={[0.09, 0.09, 0.09]}
			receiveShadow
			castShadow
		>
			<PointLight {scene} {parent} props={{ color: '#f40' }} />
		</Mesh>
		//平面
		<Mesh
			{scene}
			rot={[-Math.PI / 2, 0, 0]}
			pos={[0, -1, 0]}
			geometry={dimian}
			material={dimianMaterial}
			receiveShadow
			castShadow
			mat={{ color: '#333' }}
		/>

		<Mesh
			{scene}
			let:parent
			geometry={cubeGeometry}
			material={cubeMaterial}
			mat={{ roughness: 0.5, metalness: 0.5, wireframe: true }}
			pos={[0, 0, 0]}
			receiveShadow
			castShadow
			animation={rotateCube}
			aniauto
		>
			//自定义纹理
			<Mesh
				{scene}
				{parent}
				pos={[1, 1, 1]}
				geometry={cubeGeometry1}
				material={cutmaterial}
				mat={{ opacity: 0.75, transparent: true, side: DoubleSide }}
				receiveShadow
				castShadow
				interact
				animation={rotateCube}
				aniauto
				on:click={triggerOnClickAni}
				onPointerOver={triggerOnOverAni}
				onPointerLeave={triggerOnOutAni}
			/>
		</Mesh>
		<OrbitControls {scene} enableDamping />
	</Scene>

	<WebGLRenderer
		{sti}
		sceneId="scene1"
		camId="cam1"
		config={{ antialias: true, alpha: false }}
		enableShadowMap
		shadowMapType={PCFSoftShadowMap}
	/>
</Canvas>
